﻿@using ZFY.Core
@Html.AntiForgeryToken()
@inject CurrentUserProfile CurrentUserProfile;
<div id="user">
  <div v-if="!isUpdate">
    <div class="avatarHolder">
      <div class="name">@CurrentUserProfile.NickName</div>
      <div>@CurrentUserProfile.Signature</div>
    </div>
    <div class="detail">
      <div>
        <span>
          <i class="el-icon-date"></i>
          @CurrentUserProfile.Birthday
        </span>
        <span>
          <i class="el-icon-phone-outline detailIcon"></i>
          @CurrentUserProfile.PhoneNumber
        </span>
        <span>
          <i class="el-icon-message"></i>

          @CurrentUserProfile.Email
        </span>
        <span>
          <i class="el-icon-house"></i>

          @CurrentUserProfile.Address
        </span>
      </div>
    </div>
    <div style="text-align:center">
      <el-button class="rgBtn" type="primary" v-on:click="isUpdate=true">修改</el-button>
    </div>


  </div>
  <div v-else>
    <div id="updateFrom" class="updateFrom">
      <el-upload class="avatar-uploader" :show-file-list="false" :auto-upload="false" ref="imgFile"
        :on-change="uploadChange">
        <img v-if="imageUrl" :src="imageUrl" class="avatar">
        <i v-else class="el-icon-plus avatar-uploader-icon"></i>
      </el-upload>
      <el-form ref="updateForm" :rules="updateRules" label-position="top" label-width="80px" v-bind:model="updateForm"
        size="small">
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="updateForm.userName" maxlength="12" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="昵称">
          <el-input v-model="updateForm.nickName" maxlength="12" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="updateForm.email"></el-input>
        </el-form-item>
        <el-form-item label="电话号码" prop="phoneNumber">
          <el-input v-model="updateForm.phoneNumber" maxlength="11" show-word-limit></el-input>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="请选择您的生日" v-model="updateForm.birthday"
            style="width: 100%;">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="所在地">
          <el-select placeholder="请选择省份" v-model="address.province" filterable style="width: 150px;"
            v-on:change="onProvinceChange">
            <el-option v-for="item in provinces" :key="item.value+'p'" :label="item.name" :value="item">
            </el-option>
          </el-select>
          <el-select placeholder="请选择城市" v-model="address.city" filterable v-on:change="onCityChange">
            <el-option v-for="item in cities" :key="item.value+'c'" :label="item.name" :value="item">
            </el-option>
          </el-select>
          <el-select placeholder="请选择区县" v-model="address.county" filterable style="width: 170px;">
            <el-option v-for="item in counties" :key="item.value+'c1'" :label="item.name" :value="item.name">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个性签名">
          <el-input type="textarea" autosize v-model="updateForm.signature"></el-input>
        </el-form-item>
        <el-form-item style="text-align: center;">
          <el-button class="rgBtn" type="primary" v-on:click="saveUser()">保存</el-button>
          <el-button v-on:click="isUpdate=false">取消</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>

</div>

@section scripts
{
<script>
  var dashboard = new Vue({
    el: '#user',
    data() {
      return {
        imgTypes: ["image/png", "image/jpg", "image/jpeg", "image/gif"],
        avatarFile: {},
        imageUrl: '',
        provinces: [],
        cities: [],
        counties: [],
        updateForm: {
          userName: '',
          returnUrl: "",
          email: "",
          phoneNumber: "",
          signature: "",
          birthday: "",
          nickName: "",
          __RequestVerificationToken: null

        },
        isUpdate: false,
        address: {
          province: "",
          city: "",
          county: ""
        },
        selectProvince: {},
        selectCity: {},
        updateRules: {
          userName: [
            { required: true, message: '请输入用户名', trigger: 'blur' },
            { min: 6, max: 12, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
          phoneNumber: [
            { min: 11, max: 11, message: '长度在 6 到 12 个字符', trigger: 'blur' }
          ],
        }
      }
    },
    methods: {
      saveUser() {
        console.log(this.address);
        this.$refs.updateForm.validate().then((res) => {
          if (res) {



            var token = document.querySelector('token, input').getAttribute('value');
            console.log(token)
            this.updateForm.__RequestVerificationToken = token;



            let param = new FormData();
            param.append("avatar", this.avatarFile.raw);
            param.append("address", JSON.stringify(this.address));
            console.log(JSON.stringify(this.address));
            for (let key in this.updateForm) {
              param.append(key, this.updateForm[key]);
              console.log(key);
            }
            putFormData("user/update", param).then(res => { console.log(res); this.isUpdate = false; })

          }


        })
      },
      onProvinceChange(value) {

        console.warn(value);
        this.address.province = value.name;
        this.cities = value.children;
      },
      onCityChange(value) {
        this.address.city = value.name;
        this.counties = value.children;
      },
      handleAvatarSuccess(res, file) {
        this.imageUrl = URL.createObjectURL(file.raw);
      },
      uploadChange(file, fileList) {

        const isLt2M = file.size / 1024 / 1024 < 10;

        if (!this.imgTypes.some(x => x === file.raw.type)) {
          this.$message.error('请选择正确的图片格式');
          return;
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 2MB!');
          return;
        }
        this.$refs.imgFile.clearFiles()
        console.log(this.$refs.imgFile);

        this.avatarFile = file;
        console.log(this.avatarFile);
        this.imageUrl = URL.createObjectURL(file.raw);
      }
    },
    created: function () {
      get("../province.json").then(res => {
        this.provinces = res;
        console.log("@CurrentUserProfile.Address");
        var address = "@CurrentUserProfile.Address".split(' ');

        this.address.province = address[0]
        this.address.city = address[1]
        this.address.county = address[2]
        console.log(this.address);
      });

      this.updateForm.userName = '@CurrentUserProfile.UserName';
      this.updateForm.nickName = '@CurrentUserProfile.NickName';
      this.updateForm.brithday = '@CurrentUserProfile.Birthday';
      this.updateForm.signature = '@CurrentUserProfile.Signature';
      this.updateForm.email = '@CurrentUserProfile.Email';
      this.updateForm.phoneNumber = '@CurrentUserProfile.PhoneNumber';
      this.updateForm.returnUrl = '@Html.Raw(@Context.Request.Query["returnUrl"])';
      this.imageUrl = '@CurrentUserProfile.Avatar';
      console.log(this.updateForm.brithday);
    }
  })

</script>
}
@section styles{
<style>
  #user {
    width: 580px;

  }

  .avatarHolder {
    margin-bottom: 24px;
    text-align: center;
  }

  .avatarHolder>img {
    width: 48px;
    height: 48px;
    margin-bottom: 20px;
    border-radius: 50%;
  }

  .avatarHolder .name {
    margin-bottom: 4px;
    font-weight: bold;
    font-size: 20px;
    line-height: 28px;
  }

  .detail {
    display: flex;
    align-items: center;
    justify-content: center;
  }

  .detail>div {
    display: flex;
    flex-direction: column;
  }

  .detail i {
    top: 4px;
    left: 0;
    font-size: 14px;
    margin-right: 8px;
  }

  .name {
    font-weight: bold;
  }

  .tagsTitle,
  .teamTitle {
    margin-bottom: 12px;
    font-weight: 500;
  }

  .avatar-uploader {
    text-align: center;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 50%;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }

  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }



  .updateFrom .el-form-item {

    margin-bottom: 15px;
  }

  .updateFrom {
    padding: 20px;
    opacity: 0.8;
    border-radius: 5px;
    background-color: white;

    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
  }

  .updateFrom>h1 {
    text-align: center;
    margin-bottom: 50px;
  }

  .el-form-item__label {
    font-weight: bold;
    padding: 0px !important;
  }

  .el-checkbox__label {}
</style>
}
